<template>
	<Layout class="bg-white p-2">
		<setting />
		<Row class="m-2">
			<Col class="p-1" span="6">
			<Date-picker class="w-100" type="datetime" @on-change="stChange" format="yyyy-MM-dd HH:mm:ss"
				placeholder="请选择开始时间">
			</Date-picker>
			</Col>
			<Col class="p-1" span="6">
			<Date-picker class="w-100" type="datetime" @on-change="etChange" format="yyyy-MM-dd HH:mm:ss"
				placeholder="请选择结束时间">
			</Date-picker>
			</Col>
			<Col class="p-1" span="3">
			<Select class="w-100" clearable v-model="searchKey.storeId" placeholder="请选择门店">
				<Option v-for="store in stores" :value="store.storeId">{{store.name}}</Option>
			</Select>
			</Col>
			<Col class="p-1" span="6">
			<radio-group class="w-100 radio" v-model="searchKey.part">
				<label
					class="ivu-radio-wrapper ivu-radio-group-item ivu-radio-wrapper-checked ivu-radio-default">筛选条件：</label>
				<Radio label="Y" @click.native.prevent="changeData('Y')">年</Radio>
				<Radio label="M" @click.native.prevent="changeData('M')">月</Radio>
				<Radio label="D" @click.native.prevent="changeData('D')">日</Radio>
			</radio-group>
			</Col>
			<Button class="float-right" type="primary" shape="circle" @click="reSearch" icon="ios-search">查询</Button>
		</Row>
		<div style="font-size: 14px;" class="text-secondary my-2 p-2">
			<Row>
				<Col class="p-1" span="8">
				<div class="text-center">
					<span>进店人数：</span><span>{{countObject.orderCount.count}}</span>
				</div>
				</Col>
				<Col class="p-1" span="8">
				<div class="text-center">
					<span>盈利金额：</span><span :class="freeAmount < 0 ? 'text-danger' : ''" >￥{{util.parseMoney(freeAmount / 100)}}</span>
				</div>
				</Col>
			</Row>
			<Row>
				<Col v-for="(item, index) in cardTypes" :key="index" class="p-1" span="8">
				<div class="text-center">
					<span>{{item.name}}金额：</span><span>￥{{util.parseMoney(countObject.cardAmount[item.cardTypeId].amount / 100)}}</span>
				</div>
				</Col>
			</Row>
			<Row>
				<Col class="p-1" span="8">
				<div class="text-center">
					<span>计时金额：</span><span>￥{{util.parseMoney(countObject.calculateTime.amount / 100)}}</span>
				</div>
				</Col>
				<Col class="p-1" span="8">
				<div class="text-center">
					<span>押金支付金额：</span><span>￥{{util.parseMoney(countObject.depositRecord.amount / 100)}}</span>
				</div>
				</Col>

				<Col class="p-1" span="8">
				<div class="text-center">
					<span>押金申退金额：</span><span>￥{{util.parseMoney(countObject.depositBackRecord.amount / 100)}}</span>
				</div>
				</Col>
			</Row>
		</div>
		<div id="container" class="w-100 p-3">
		</div>

	</Layout>

</template>

<script>
	import setting from "../src/components/setting.vue";
	export default {
		components: {
			setting
		},
		data: function() {
			return {
				searchKey: {
					st: "",
					et: "",
					storeId: "",
					part: "Y",
				},
				cardTypes: [],
				countObject: {
					orderCount: {
						count: 0,
					},
					calculateTime: {
						amount: 0,
					},
					depositRecord: {
						amount: 0,
					},
					depositBackRecord: {
						amount: 0,
					}
				},
				stores: [],
			};
		},
		created: function() {
			this.searchStores().then(this.reSearch);
		},
		computed: {
			freeAmount: function() {
				let freeAmount = 0;
				freeAmount += this.countObject.calculateTime.amount;
				freeAmount += this.countObject.depositRecord.amount;
				
				for (let index in this.cardTypes) {
					let cardType = this.cardTypes[index];
					let part = this.countObject.cardAmount[cardType.cardTypeId];
					
					if (!part || !part.amount) {
						continue;
					}
					
					freeAmount += part.amount;
				}
				
				freeAmount = freeAmount - this.countObject.depositBackRecord.amount;
				
				return freeAmount;
			}
		},
		methods: {
			stChange: function(e) {
				this.searchKey.st = e;
			},
			etChange: function(e) {
				this.searchKey.et = e;
			},
			reSearch: function() {
				console.log(this.searchKey);
				this.search()
					.then(this.initOrderEchart)
					.then(this.searchCardTypes)
					.then(this.initCardTypeEchart)
					.then(this.initOrderCalculateEchart)
					.then(this.initDepositRecordEchart)
					.then(this.initDepositBackRecordEchart);
			},
			createEchartNode: function(id) {
				let exNode = document.getElementById(id);
				if (exNode) {
					exNode.remove();
				}
				let newNode = document.createElement("DIV");
				newNode.id = id;
				newNode.className = "w-100 p-2 my-3 border";
				document.getElementById("container").appendChild(newNode);
				return newNode;
			},
			createEchartOption: function(title) {
				return {
					title: {
						text: title
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					yAxis: {
						type: 'category',
						data: []
					},
					series: [{
						
						type: 'bar',
						data: []
					}, ]
				};
			},
			changeData(nowValue) {
				this.searchKey.part = nowValue;
			},
			initDepositBackRecordEchart: function() {
				
				if (!this.countObject.depositBackRecord.amount) {
					return;
				}
				
				let height = 0;
				let optionOrder = this.createEchartOption("押金申退金额："+this.countObject.depositBackRecord.amount / 100);
				
				for (let index in this.countObject.depositBackRecord.keyArray) {
					height += 50;
					let prop = this.countObject.depositBackRecord.keyArray[index];
					optionOrder.yAxis.data.push(prop);
					optionOrder.series[0].data.push(this.countObject.depositBackRecord.part[prop] / 100);
				}
				height += 100;
				let myOrderChart = echarts.init(this.createEchartNode("depositBackRecord"), null, {
					height
				});
				
				myOrderChart.setOption(optionOrder);
			},
			initDepositRecordEchart: function() {
				
				if (!this.countObject.depositRecord.amount) {
					return;
				}
				
				let height = 0;
				let optionOrder = this.createEchartOption("押金支付金额："+this.countObject.depositRecord.amount / 100);
				
				for (let index in this.countObject.depositRecord.keyArray) {
					height += 50;
					let prop = this.countObject.depositRecord.keyArray[index];
					optionOrder.yAxis.data.push(prop);
					optionOrder.series[0].data.push(this.countObject.depositRecord.part[prop] / 100);
				}
				height += 100;
				let myOrderChart = echarts.init(this.createEchartNode("depositRecord"), null, {
					height
				});
				
				myOrderChart.setOption(optionOrder);
			},
			initOrderEchart: function() {
				
				if (!this.countObject.orderCount.count) {
					return;
				}
				
				let height = 0;
				let optionOrder = this.createEchartOption("进店人数："+this.countObject.orderCount.count);
				
				for (let index in this.countObject.orderCount.keyArray) {
					height += 50;
					let prop = this.countObject.orderCount.keyArray[index];
					optionOrder.yAxis.data.push(prop);
					optionOrder.series[0].data.push(this.countObject.orderCount.part[prop]);
				}
				height += 100;
				let myOrderChart = echarts.init(this.createEchartNode("orderCount"), null, {
					height
				});
				
				myOrderChart.setOption(optionOrder);
			},
			initOrderCalculateEchart: function() {
				
				if (!this.countObject.calculateTime.amount) {
					return;
				}
				
				let height = 0;
				let optionOrder = this.createEchartOption("计时金额："+this.countObject.calculateTime.amount / 100);
				
				for (let index in this.countObject.calculateTime.keyArray) {
					height += 50;
					let prop = this.countObject.calculateTime.keyArray[index];
					optionOrder.yAxis.data.push(prop);
					optionOrder.series[0].data.push(this.countObject.calculateTime.part[prop] / 100);
				}
				height += 100;
				let myOrderChart = echarts.init(this.createEchartNode("calculateTime"), null, {
					height
				});
				
				myOrderChart.setOption(optionOrder);
			},
			initCardTypeEchart: function() {
				for (let index in this.cardTypes) {
					let cardType = this.cardTypes[index];
					let keyArray = this.countObject.cardAmount[cardType.cardTypeId].keyArray;
					let part = this.countObject.cardAmount[cardType.cardTypeId];
					if (!part.amount) {
						continue;
					}
					
					let height = 0;
					let optionCardType = this.createEchartOption(cardType.name + "金额："+(part.amount / 100));
					
					for (let index in keyArray) {
						height += 50;
						let prop = keyArray[index];
						optionCardType.yAxis.data.push(prop);
						optionCardType.series[0].data.push(part[prop] / 100);
					}
					height += 100;
					let myCardTypeChart = echarts.init(this.createEchartNode(cardType.cardTypeId+"_cardTYpe"), null, {
						height
					});
					
					myCardTypeChart.setOption(optionCardType);
				}
			},
			search: function() {
				return this.http.get({
					url: "/home/all",
					param: this.searchKey
				}).then(res => {
					this.countObject = res;
					document.getElementById("container").innerHTML = "";
					console.log(res);
				});
			},
			searchStores: function() {
				return this.http.get({
					url: "/store/store/info"
				}).then(response => {
					this.stores = response
				})
			},
			searchCardTypes: function() {
				return this.http.get({
					url: "/client/card-type/all"
				}).then(res => {
					this.cardTypes = res;
				});
			}

		},
	}
</script>

<style scoped>
	ul {
		list-style: none;
	}

	.test {
		width: 100%;
		height: 40rem;
		overflow: auto;
	}

	.scrollbar {
		width: 30px;
		height: 300px;
		margin: 0 auto;
	}

	.test-1::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 10px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 1px;
	}

	.test-1::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 1px;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: #a9a9a9;
	}

	.test-1::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 1px;
		background: #ededed;
	}

	.chart-item {
		height: 60rem;
		width: calc(100% - 200px);
	}

	.radio {
		height: 2rem;
		line-height: 2rem;
	}
	
	.p-1 .text-center {
		display: flex;
		justify-content: space-between;
		margin: 0 20px;
	}

</style>
